<template>
    <div class="page-item-container absolute-page-item">
        <div class="page-item" v-for="(item, key) in itemList" :key=key :class="{itemactive: onItem == item.routeName}" @click="changeActive(item.routeName)">{{item.name}}</div>

    </div>
</template>

<script>
export default {
  name: 'pageItem',
  data() {
    return{
      onItem: ''
    }
  },
  props: {
    itemList: {
      type: Array,
      required: true
    }
  },
  created() {
    //console.log(this.$route)
    this.onItem = this.$route.name
  },
  mounted: function () {
    
  },
  methods: {
    changeActive (on) {
        if(on == 'college-blank'){
          window.open('https://campus.goktech.cn/','_blank')
          return
        }
        this.$router.push({ name: on})
    } 
  },
  watch:{
    $route(to,from){
        //console.log(to)
        this.onItem = to.name
    }
  } 
}
</script>

<style lang="stylus" scoped>
.page-item-container{
    width: 100%;
    min-width: 1200px;
    height:58px;
    line-height: 58px;
    background:rgba(255,255,255,1);
    text-align: center;
    border-bottom: 1px solid rgba(238,238,238,1);  
}
.page-item{
    display: inline-block;
    font-family:MicrosoftYaHei;
    font-size:18px;
    color:rgba(130,130,130,1);
    padding: 0 40px;
    position: relative;
    cursor: pointer;
    &:hover{
        color:rgba(20,87,253,1);
    }
    &:hover:after{
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -10px;
        content: '';
        width:20px;
        height:4px;
        color:rgba(20,87,253,1);
        background:rgba(20,87,253,1);  
    }
}
.itemactive{
    color:rgba(20,87,253,1);
}
.itemactive:after{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    content: '';
    width:20px;
    height:4px;
    background:rgba(20,87,253,1);  
}
</style>
